<template>
    <div calss='form' style="padding:10px">
        <g-formItem type="input" :value="title" label="表单名称" valueKey="title" @valueChange="valueChange"></g-formItem>
        <g-formItem type="input" :value="placeholder" valueKey="placeholder" label="提示文字"
            @valueChange="valueChange"></g-formItem>
        <el-row style="margin-bottom:20px">
            <el-col :span="12" style="text-align: left;">选项设置</el-col>
            <el-col :span="12" class="addOption" @click="addOption">+ 新增选项</el-col>
        </el-row>
        <div v-for="(item,index) in selectOption" :key="item.value">
            <el-row>
                <el-col :span="20">
                    <g-formItem  type="input" :value="item.label" :valueKey="index" @valueChange="selectValueChange"></g-formItem>
                </el-col>
                <el-col :span="4" @click="deleteOption($event,index)" style="cursor:pointer">
                    <el-icon class="delete"><Delete/></el-icon>
                </el-col>
            </el-row>
        </div>
        <g-formItem type="switch" :value="required" valueKey="required" label="必填项"
            @valueChange="valueChangeRule"></g-formItem>
    </div>
</template>
<script setup>
import { computed , ref} from 'vue'
import { componentsNameList } from '@/store/pinia';
const list = componentsNameList()
const index = computed(() => { return list.index })
const title = computed(() => { return list.list[index.value]?.title })
const placeholder = computed(() => { return list.list[index.value]?.placeholder })
const required = computed(() => { return list.list[index.value]?.rule.required })
const valueChange = (value, key) => {
    console.log(value);
    // key要和formOptions里面的字段保持一致
    list.list[index.value][key] = value
}
/* 修改rule */
const valueChangeRule = (value, key) => {
    console.log(index.value);
    // key要和formOptions里面的字段保持一致
    list.list[index.value].rule[key] = value
    console.log(list.list);
}
const selectOption = ref([])
/* 下拉框值改变 */
const selectValueChange = (newValue,index)=>{
    selectOption.value[index].label = newValue
}
/* 新增下拉选项 */
const addOption = ()=> {
    let label = '新增选项' + (selectOption.value.length + 1)
    let selectValue = selectOption.value.length + 1
    list.list[index.value].option = selectOption.value
    selectOption.value.push({label,value:selectValue})
}
/* 删除下拉选项 */
const deleteOption = (e,i)=>{
    selectOption.value.splice(i,1)
}

</script>
    
<style scoped>
::v-deep.el-form-item {
    margin-bottom: 20px !important;
}
.addOption{
    text-align: right;
    cursor: pointer;
    color:var(--isActive-color)
}
.delete{
    margin-top:7px
}
</style>